import React, { Component } from 'react';
import { Form, Input, Button, Select } from 'antd';
const { Option } = Select;

class biaodan extends Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {
        username: '你好',
        money: 'rmb'
      },
    }
    this.formRef = React.createRef() //calss和函数（Form.useForm()） 组件的写法不一样

  }

  //组件挂载完毕 --用于数据请求
  componentDidMount() {
    console.log(this.formRef)
    // 初始化展示
    this.formRef.current.setFieldsValue({
      username: '你好',
      money: '',
    })
  }

  //组件将要卸载
  componentWillUnmount() { }

  render() {
    return (
      <div>
        {/* <Form ref={this.formRef} initialValues={this.state.form} onFieldsChange={this.onFieldsChange}> */}
        <Form ref={this.formRef} onFieldsChange={this.onFieldsChange} onFinish={this.onFinish}>
          <Form.Item label="名字" name="username" rules={[{ required: true, message: '请输入名称' }]}>
            <Input />
          </Form.Item>
          <Form.Item label="钱" name="money" rules={[{ required: true, validator: this.validateLimit }]}>
            <Select onChange={this.onCurrencyChange}>
              <Option value="rmb">人民币</Option>
              <Option value="dollar">美元</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            {/* <Button type="primary" htmlType="submit" onClick={this.confirm}> */}
            <Button type="primary" onClick={this.confirm}>
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }

  //form表单数据变动的时 调用
  onFieldsChange = (changedFields, allFields) => {
    // this.formRef.current.setFieldsValue({
    //   username: allFields[0].value,
    //   money: allFields[1].value,
    // })
  }
  //表单验证成功后的回调
  onFinish = (values) => {
    console.log(values, 11111)
  }
  //表单自定义验证 callback已弃用
  validateLimit = (rule, value) => {
    if (value) {
      // callback('请选择');
      return Promise.resolve()
    } else {
      // callback();
      return Promise.reject('请选择1')
    }
  }
  //手动验证 
  confirm = () => {
    this.formRef.current.validateFields().then(values => {
      console.log(values, 222)
    })
  }
}

export default biaodan;